<template>
  <div>
    <el-form
      :model="formData"
      inline
      style="display: flex; justify-content: flex-end; margin-top: 10px"
    >
      <el-form-item prop="username">
        <el-input
          v-model="formData.username"
          placeholder="请输入管理员名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary">查找</el-button>
        <el-button @click="addDiaog('创建', 'add', null)" type="primary"
          >添加</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :v-Loading="facLoading" :data="tableData" border>
      <el-table-column
        align="center"
        label="管理员ID"
        prop="id"
      ></el-table-column>
      <el-table-column
        align="center"
        label="管理员名称"
        prop="username"
      ></el-table-column>
      <el-table-column
        align="center"
        label="管理员头像"
        prop="avatar"
      ></el-table-column>
      <el-table-column align="center" label="管理员角色" prop="roleIds" >
        
         <template slot-scope="scope">
           <div  v-for="(item,index) in scope.row.roleIds" :key="index">
          <el-tag>{{ item | tableFilter(options) }}</el-tag>
        </div>
         </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="addDiaog('创建', 'edit', scope.row)" type="primary"
            >编辑</el-button
          >
          <el-button @click="deleteFa(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <el-dialog :visible.sync="dialogVisible" :title="dialogTitle" width="500">
      <el-form
        ref="dialogForm"
        :model="dialogFormData"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="管理员名称" prop="username">
          <el-input v-model="dialogFormData.username"></el-input>
        </el-form-item>

        <el-form-item label="管理员密码" prop="password">
          <el-input v-model.number="dialogFormData.password"></el-input>
        </el-form-item>

        <el-form-item label="管理员头像" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action="http://192.168.200.251:8888/admin/storage/create"
            :show-file-list="false"
            :on-success="iconUrlSuccess"
            :headers="{ 'shopping-admin-token': token }"
          >
            <img
              v-if="dialogFormData.avatar"
              :src="dialogFormData.avatar"
              style="width: 100px"
            />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="
                width: 100px;
                height: 100px;
                border-radius: 10px;
                border: 2px dashed #ddd;
                line-height: 100px;
              "
            >
            </i>
          </el-upload>
        </el-form-item>

        <el-form-item label="管理员角色" prop="roleIds">
          <el-select v-model="dialogFormData.roleIds" multiple>
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confirm" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import axios from "axios";
export default {
  name: "adminUser",
  componentTitle: "管理员",
  data() {
    return {
    options: [
        {
          label: "超级管理员",
          value: "1",
        },
        {
          label: "商场管理员",
          value: "2",
        },
        {
          label: "推广管理员",
          value: "3",
        },
      ],

      token: sessionStorage.getItem("shopping-admin-token"),
      facLoading: false,
      dialogVisible: false,
      dialogTitle: "创建",
      dialogType: "add",
      tableData: [],
      formData: {
        username: "",
      },
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0,
      },
      dialogFormData: {
        username: "",
        password: "",
        avatar: "",
        roleIds: [],
      },
      formRules: {
        username: [
          { required: true, message: "请输入名称", trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
    };
  },
filters: {
    tableFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.value) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].label;
      }
    },
  },

  mounted() {
    this.search();
  },
  methods: {
    //调用数据
    search() {
      (this.facLoading = true),
        axios({
          url: "http://192.168.200.251:8888/admin/admin/list",
          method: "get",
          params: {
            page: this.pageInfo.page,
            limit: this.pageInfo.limit,
            ...this.formData,
          },
          headers: {
            "shopping-admin-token": sessionStorage.getItem(
              "shopping-admin-token"
            ),
          },
        }).then((res) => {
          (this.facLoading = false), (this.tableData = res.data.data.list);
          this.pageInfo.total = res.data.data.total;
        });
    },
    //打开dialog窗口
    addDiaog(title, type, row) {
      console.log(row);
      this.dialogVisible = true;
      this.dialogType = type;
      this.dialogTitle = title;

      if (type === "edit") {
        this.$nextTick(() => {
          this.dialogFormData = Object.assign({}, row);
        });
      }
    },
    handleSizeChange(value) {
      this.pageInfo.limit = value;
      this.search();
    },
    handleCurrentChange(value) {
      this.pageInfo.page = value;
      this.search();
    },
    confirm() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          if (this.dialogType === "add") {
            this.addData();
          } else if (this.dialogType === "edit") {
            this.editData();
          }
        } else {
          return false;
        }
      });
      // this.dialogVisible=false
    },
    cancel() {
      this.$refs.dialogForm.resetFields();
      this.dialogVisible = false;
    },
    //上传图片成功的回调函数
    iconUrlSuccess(res, file) {
      this.dialogFormData.picUrl = res.data.url.replace(
        /localhost:8888/g,
        "192.168.200.251:8888"
      );
    },
    picUrlSuccess(res, file) {
      this.dialogFormData.iconUrl = res.data.url.replace(
        /localhost:8888/g,
        "192.168.200.251:8888"
      );
    },
    //添加接口
    addData() {
      axios({
        url: "http://192.168.200.251:8888/admin/admin/create",
        method: "post",
        data: {
          ...this.dialogFormData,
        },
        headers: {
          "shopping-admin-token": sessionStorage.getItem(
            "shopping-admin-token"
          ),
        },
      }).then((res) => {
        if (res.data.errno === 0) {
          this.cancel();
          this.$notify.success({ title: "添加成功" });
          this.search();
        } else {
          this.$notify.error({ title: "添加失败" });
        }
      });
    },
    //编辑接口
    editData() {
      axios({
        url: "http://192.168.200.251:8888/admin/admin/update",
        method: "post",
        data: {
          ...this.dialogFormData,
          // addTime: "",
          // deleted: '',
          // id: '',
          // sortOrder: '',
          // updateTime: ""
        },
        headers: {
          "shopping-admin-token": sessionStorage.getItem(
            "shopping-admin-token"
          ),
        },
      }).then((res) => {
        if (res.data.errno === 0) {
          this.cancel();
          this.$notify.success({ title: "编辑成功" });
          this.search();
        } else {
          this.$notify.errno({ title: "编辑失败" });
        }
      });
    },
    deleteFa(row) {
      this.$confirm("此操作将删除该问题, 是否继续?").then(() => {
        axios({
          url: "http://192.168.200.251:8888/admin/admin/delete",
          method: "post",
          data: row,
          headers: {
            "shopping-admin-token": sessionStorage.getItem(
              "shopping-admin-token"
            ),
          },
        }).then((res) => {
          this.$notify.success({ title: "删除成功" });
          this.search();
        });
      });
    },
  },
};
</script>



